<template>
  <a-modal
    :visible="visible"
    :footer="null"
    :bodyStyle="modalStyle"
    :closable="false"
    @cancel="() => $emit('update:visible', false)"
  >
    <iframe style="height: 100%;width: 100%;border: 0;" :src="src"></iframe>
  </a-modal>
</template>
<script>
export default {
  data() {
    return {
      modalStyle: {
        height: "650px",
        width: "300px",
        margin: "0 auto",
      },
    };
  },
  props: {
    visible: {
      type: Boolean,
      require: true,
    },
    src: {
      type: String,
      require: true,
    },
  },
  mounted() {},
  methods: {},
};
</script>
<style lang="less" scoped="scoped">
.pre-modal {
  .ant-modal-body {
    background: #f0f2f5 !important;
  }
}

/deep/ .ant-modal-content {
  background-image: url(https://vue..com/app/static/img/iphoneBg.86faf130.png);
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0);
  box-shadow: none;
}

/deep/ .ant-modal-body {
  padding: 36px 0 !important;
}

/deep/ .default-theme .cu-botton-submit {
  line-height: 33px;
}
</style>
